<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新建用户</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 300px; margin: 50px auto; }
        .form-group { margin-bottom: 10px; }
        label { display: block; margin-bottom: 5px; }
        input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
        button { padding: 10px 20px; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 4px; }
    </style>
</head>
<body>
<div class="container">
    <h2>新建用户</h2>
    <form id="addUserForm">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="contactInfo">联系方式:</label>
            <input type="text" id="contactInfo" name="contactInfo" required>
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div class="form-group">
            <label for="address">地址:</label>
            <input type="text" id="address" name="address" required>
        </div>
        <div class="form-group">
            <button type="button" onclick="createUser()">创建用户</button>
            <button type="button" onclick="window.history.back()">取消</button>
        </div>
    </form>
</div>

<script>
    // 创建用户
    function createUser() {
        const username = document.getElementById('username').value;
        const email = document.getElementById('email').value;
        const contactInfo = document.getElementById('contactInfo').value;
        const password = document.getElementById('password').value;
        const address = document.getElementById('address').value;

        fetch('http://localhost:8080/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ username, email, contactInfo, password, address }),
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('Success:', data);
                alert('用户创建成功');
                window.history.back(); // 返回上一页
            })
            .catch(error => {
                console.error('Error:', error);
                alert('用户创建失败: ' + error.message);
            });
    }
</script>
</body>
</html>